<template>
  <page-header-wrapper>
    <page-tab-list>
      <a-alert message="此配置用于抖音打开首屏展示" type="info" show-icon style="margin:24px 0" />
      <a-form-model
        ref="douyinForm"
        :model="douyinInfo"
        :labelCol="{ span: 2 }"
        :wrapperCol="{ span: 7 }"
        v-loading="loading"
      >
        <a-form-model-item
          label="抖口令"
          prop="douyin_url"
          help="设置后，用户付款后会自动复制该内容到剪贴板，打开抖音会自动弹出相关抖音号"
        >
          <a-input v-model="douyinInfo.douyin_url" />
        </a-form-model-item>
        <a-form-model-item label="appId" prop="appId">
          <a-input v-model="douyinInfo.app_id" />
        </a-form-model-item>
        <a-form-model-item label="appSecret" prop="appSecret">
          <a-input v-model="douyinInfo.app_secret" />
        </a-form-model-item>
        <a-form-model-item label="salt" prop="salt">
          <a-input v-model="douyinInfo.salt" />
        </a-form-model-item>
        <a-form-model-item label="token" prop="token">
          <a-input v-model="douyinInfo.token" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 7, offset: 2 }">
          <a-button :loading="btnLoading" type="primary" @click="submitForm"> 保存 </a-button>
        </a-form-model-item>
      </a-form-model>
    </page-tab-list>
  </page-header-wrapper>
</template>
<script>
import { getDouyinInfo, setDouyinInfo } from '@/api/store'

export default {
  name: 'DouYinConfig',
  data() {
    return {
      loading: false,
      douyinInfo: {
        douyin_url: '',
        app_id: '',
        app_secret: '',
        salt: '',
        token: '',
      },
      btnLoading: false,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData: function () {
      this.loading = true
      getDouyinInfo({})
        .then((res) => {
          if (res.code == 0) {
            this.douyinInfo.douyin_url = res.data.douyin_url
            this.douyinInfo.app_id = res.data.app_id
            this.douyinInfo.app_secret = res.data.app_secret
            this.douyinInfo.salt = res.data.salt
            this.douyinInfo.token = res.data.token
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    submitForm: function () {
      this.btnLoading = true
      setDouyinInfo({
        content: this.douyinInfo.douyin_url,
        app_id: this.douyinInfo.app_id,
        app_secret: this.douyinInfo.app_secret,
        salt: this.douyinInfo.salt,
        token: this.douyinInfo.token,
      })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success(res.msg)
          } else {
            this.$message.warning(res.msg)
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.btnLoading = false
        })
    },
  },
}
</script>
<style scoped>
</style>
